<template>
  <div class="layout-padding-auto layout-padding-view">
    <!--查询表单-->
    <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
      <el-form-item :label="$t('equipment.eqprunTime')">
        <el-date-picker
            style="width: 300px"
            v-model="state.queryForm.checkTime"
            type="daterange"
            @change="changeCheckTime"
            range-separator="To"
            value-format="YYYY-MM-DD HH:mm:ss"
            start-placeholder="StartTime"
            end-placeholder="Endtime"
        />
      </el-form-item>

      <el-form-item :label="$t('equipment.equipmentCode')">
        <el-input style="width: 200px;" v-model="state.queryForm.equipmentCode" clearable
                  :placeholder="$t('equipment.equipmentCode')"/>
      </el-form-item>
      <el-form-item :label="$t('equipment.eqpProcesses')">
        <el-input style="width: 200px;" v-model="state.queryForm.eqpProcesses" clearable
                  :placeholder="$t('equipment.eqpProcesses')"/>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" type="primary" @click="getDataList">查询</el-button>
        <el-button icon="refresh"  @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!--查询结果的列表-->
    <el-table
        :data="state.dataList"
        highlight-current-row
        v-loading="state.loading"
        border
        style="width: 100%; height: 100%"
        :cell-style="tableStyle.cellStyle"
        stripe
        :header-cell-style="tableStyle.headerCellStyle"
        @row-click="clickRow"
        @selection-change="selectionChangeHandle"
    >
      >
      <el-table-column prop="equipmentCode" :label="$t('equipment.equipmentName')"/>
      <el-table-column prop="equipmentName" :label="$t('equipment.equipmentName')"/>
      <el-table-column prop="equipmentSpc" :label="$t('equipment.equipmentSpc')"/>
      <el-table-column prop="eqpProcesses" :label="$t('equipment.eqpProcesses')"/>
      <el-table-column prop="eqpState" :label="$t('equipment.eqpState')"/>
      <el-table-column prop="eqprunTime" :label="$t('equipment.eqpRun')"/>
      <el-table-column prop="remark" :label="$t('equipment.remark')"/>
    </el-table>
    <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination"/>
  </div>
</template>

<script setup lang="ts">
import {BasicTableProps, useTable} from '/@/hooks/table';
import {useI18n} from 'vue-i18n';
//import{getSelectEQP}from"/@/api/platform/qms/qmsCheckReport";

const queryRef = ref();
const locationRef = ref();

const {t} = useI18n();
const formatDate = (date: Date): string => {
  console.log(date);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

// 设备表格的配置
const state: BasicTableProps = reactive<BasicTableProps>({
  // queryForm: {"checkStartTime":formatDate(new Date()),"checkEndTime":formatDate(new Date())},
  queryForm: {},

  //pageList: getFqcPageSet
});

//  table hook
const {tableStyle, getDataList, sizeChangeHandle, currentChangeHandle} = useTable(state);

// 多选变量
const selectObjs = ref([]) as any;
const multiple = ref(true);

//时间点击
const changeCheckTime = (data) => {
  state.queryForm.checkStartTime = data[0];
  state.queryForm.checkEndTime = data[1];
};

// 点击行的时候触发
const clickRow = (row: any) => {
  locationRef.value.query(row);
};

// 清空搜索条件
const resetQuery = () => {
  // 清空搜索条件
  // state.queryForm = {"checkStartTime":formatDate(new Date()),"checkEndTime":formatDate(new Date())}
  state.queryForm = {};
  // 清空多选
  selectObjs.value = [];
  getDataList();
};
</script>
